<template>
  <div class="person_management">
    <span @click="personManage">人员管理</span>
    <div class="person_m" v-if="person.show">
      <h2>
        <span class="iconfont icon-Group"></span>
        <span>人员管理</span>
        <i class="iconfont icon-guanbi" @click="closePersonManage"></i>
      </h2>
      <div class="top_box">
        <el-form :inline="true" :model="person" class="demo-form-inline">
          <el-form-item label="姓名：">
            <el-input v-model="person.name" placeholder="姓名"></el-input>
          </el-form-item>
          <el-form-item label="班组：">
            <el-select v-model="person.client" placeholder="班组">
              <el-option
                v-for="item in person.clientList"
                :key="item.CLIENT_NO"
                :label="item.CLIENT_NAME"
                :value="item.CLIENT_NO"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <span style="color: #666">
              记录数量：
              <span
                style="padding: 0 4px; border-bottom: 1px solid #ccc;"
              >{{person.dataList.length}}</span>条
            </span>
          </el-form-item>
          <el-form-item style="margin-left: 20px;">
            <el-button type="primary" @click="personQuery">查 询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="success" @click="addNewPerson">新 增</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="danger" @click="deletePerson">删 除</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="person_content">
        <!-- 人员管理列表 -->
        <el-table
          :data="person.dataList"
          style="width: 100%"
          border
          highlight-current-row
          v-if="person.listShow"
          @cell-mouse-enter="cellMouseEnter"
          @row-click="rowClick"
          @row-dblclick="editPerson"
          height="477"
        >
          <el-table-column sortable fixed prop="VID" label="人员ID" align="center" width="90"></el-table-column>
          <el-table-column fixed prop="NAME" label="姓名" align="center" width="90"></el-table-column>
          <el-table-column fixed prop="SIMCARD_NO" label="通讯卡号" align="center"></el-table-column>
          <el-table-column sortable fixed prop="CLIENT_NO" label="班组编号" align="center"></el-table-column>
          <el-table-column fixed prop="CLIENT_NO" label="班组" align="center"></el-table-column>
          <el-table-column fixed prop="SEX" label="性别" align="center" width="70"></el-table-column>
          <el-table-column sortable fixed prop="PHONE" label="电话" align="center"></el-table-column>
          <el-table-column fixed prop="WORKTYPE" label="工种" align="center" width="90"></el-table-column>
          <el-table-column sortable fixed prop="BIRTHDAY" label="生日" align="center"></el-table-column>
          <el-table-column
            sortable
            fixed
            prop="WORKDATE"
            label="入职时间"
            align="center"
            :formatter="formatterTime"
          ></el-table-column>
        </el-table>
        <!-- 新增人员 -->
        <div class="new_person" v-if="newPersonForm.show">
          <h2>
            <span class="iconfont icon-xinzengrenyuan--"></span>
            <span>{{editPersonShow ? '编辑' : '新增'}}人员</span>
            <span
              class="iconfont icon-guanbi"
              @click="newPersonForm.show = false, person.listShow = true"
            ></span>
          </h2>
          <el-form
            ref="newPersonForm"
            :model="newPersonForm"
            v-model="newPersonForm"
            label-width="80px"
            :rules="rules"
            inline-message
          >
            <el-form-item prop="Name" label="姓名">
              <el-input v-model="newPersonForm.Name" placeholder="请输入姓名"></el-input>
            </el-form-item>
            <el-form-item prop="Phone" label="电话号码">
              <el-input
                v-model="newPersonForm.Phone"
                placeholder="请输入电话"
                maxlength="11"
                oninput="value=value.replace(/[^\d]/g,'')"
              ></el-input>
            </el-form-item>
            <el-form-item label="通讯编号">
              <el-input v-model="newPersonForm.SimCardNo" placeholder="请输入通讯编号"></el-input>
            </el-form-item>
            <el-form-item label="出生日期">
              <el-date-picker
                v-model="newPersonForm.BirhDay"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="请选择出生日期"
                style="width: 100%;"
              ></el-date-picker>
            </el-form-item>
            <el-form-item label="入职时间">
              <el-date-picker
                v-model="newPersonForm.WorkDate"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="请选择入职时间"
                style="width: 100%;"
              ></el-date-picker>
            </el-form-item>
            <el-form-item prop="Sex" label="性别">
              <el-radio v-model="newPersonForm.Sex" label="男">男</el-radio>
              <el-radio v-model="newPersonForm.Sex" label="女">女</el-radio>
            </el-form-item>
            <el-form-item prop="WorkType" label="工种">
              <el-select v-model="newPersonForm.WorkType" placeholder="请选择工种">
                <el-option value="班组长"></el-option>
                <el-option value="环卫工"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="ClientNo" label="班组">
              <el-select v-model="newPersonForm.ClientNo" placeholder="请选择班组">
                <el-option
                  v-for="item in person.clientList"
                  :key="item.CLIENT_NO"
                  :label="item.CLIENT_NAME"
                  :value="item.CLIENT_NO"
                />
              </el-select>
            </el-form-item>
            <div class="btns">
              <el-button
                type="primary"
                @click="addPerson('newPersonForm')"
                v-if="!editPersonShow"
              >确定</el-button>
              <el-button
                type="primary"
                @click="saveEditPerson('newPersonForm')"
                v-if="editPersonShow"
              >保存</el-button>
              <el-button type="success" @click="resetForm('newPersonForm')">重置</el-button>
              <el-button
                type="danger"
                @click="newPersonForm.show = false, person.listShow = true"
              >取消</el-button>
            </div>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      person: {
        show: false,
        name: '',
        client: '',
        clientList: [],
        dataList: [],
        listShow: true
      },
      // 新增人员
      newPersonForm: {
        show: false,
        Name: '',
        Phone: '',
        SimCardNo: '',
        BirhDay: '',
        WorkDate: '',
        Sex: '男',
        WorkType: '',
        ClientNo: ''
      },
      editPersonShow: false,
      rules: {
        Name: [{ required: true, validator: this.checkName, message: this.errorMessage, trigger: 'blur' }],
        Phone: [{ required: true, validator: this.checkPhone, message: this.errorMessage, trigger: 'blur' }],
        Sex: [{ required: true, message: ' ', trigger: 'blur' }],
        WorkType: [{ required: true, message: ' ', trigger: 'blur' }],
        ClientNo: [{ required: true, message: ' ', trigger: 'blur' }]
      },
      errorMessage: ' ',
      personVID: ''
    }
  },
  methods: {
    // 打开人员管理
    personManage () {
      this.person.show = true
      // eventBus.$emit('isCover', true)
      this.getPersonList()
    },
    // 关闭人员管理
    closePersonManage () {
      this.person.show = false
      this.newPersonForm.show = false
      this.person.listShow = true
      // eventBus.$emit('isCover', false)
    },
    // 人员管理列表
    async getPersonList () {
      const { data } = await this.$Http.get(`/DataListCompany/GetWorkerListApi?ClientNo=${this.$route.query.ClientNo}`)
      this.person.dataList = data
      // 获取分组
      const groupData = await this.$Http.get(`/DataListCompany/GetTeamListApi?ClientNo=${this.$route.query.ClientNo}`)
      this.person.clientList = groupData.data
    },
    // 人员管理查询
    personQuery () {
      const { name, client } = this.person
      if (name) this.person.dataList = this.person.dataList.filter(item => name === item.NAME)
      if (client) this.person.dataList = this.person.dataList.filter(item => client === item.CLIENT_NO)
    },
    // 新增人员
    addNewPerson () {
      this.editPersonShow = false
      this.person.listShow = false
      this.newPersonForm = {
        show: true,
        Name: '',
        Phone: '',
        SimCardNo: '',
        BirhDay: '',
        WorkDate: '',
        Sex: '男',
        WorkType: '',
        ClientNo: ''
      }
    },
    async addPerson (formName) {
      for (const k in this.newPersonForm) {
        if (this.newPersonForm[k] === '') {
          this.$message({
            message: '表单项不能为空！！',
            type: 'warning'
          })
          return false
        }
      }
      const { data } = await this.$Http.get('/DataListCompany/AddWorkerApi', { params: this.newPersonForm })
      if (data.Message) {
        this.$message({
          message: data.Message,
          type: 'warning'
        })
        return false
      }
      this.newPersonForm.show = false
      this.person.listShow = true
      this.getPersonList()
      this.resetForm('newPersonForm')
    },
    // 重置新增人员表单
    resetForm (formName) {
      this.$refs[formName].resetFields()
      // this.newPersonForm.SimCardNo = ''
      // this.newPersonForm.BirhDay = ''
      // this.newPersonForm.WorkDate = ''
      this.newPersonForm = {
        show: true,
        Name: '',
        Phone: '',
        SimCardNo: '',
        BirhDay: '',
        WorkDate: '',
        Sex: '男',
        WorkType: '',
        ClientNo: ''
      }
    },
    // 校验手机号格式
    checkPhone (rule, value, callback) {
      if (value === '') callback(new Error('请输入手机号'))
      if (/^1[34578]\d{9}$/.test(value) === false) callback(new Error('请输入正确的手机号'))
    },
    // 校验姓名格式
    checkName (rule, value, callback) {
      var ren = /((^[\u4E00-\u9FA5]{2,5}$)|(^[a-zA-Z]+[\s.]?([a-zA-Z]+[\s.]?){0,4}[a-zA-Z]$))/
      if (value === '') callback(new Error('请输入姓名'))
      if (value.length < 2) callback(new Error('请输入姓名'))
      if (!ren.test(value)) callback(new Error('姓名只能是汉字'))
      if (value.length >= 5) callback(new Error('姓名过长'))
    },
    // 人员管理--编辑人员--双击某一行
    editPerson (row, column, event) {
      this.editPersonShow = true
      this.newPersonForm.show = true
      this.person.listShow = false
      this.newPersonForm = {
        show: true,
        Name: row.NAME,
        Phone: row.PHONE,
        SimCardNo: row.SIMCARD_NO,
        BirhDay: row.BIRTHDAY.split('T')[0],
        WorkDate: row.WORKDATE.split('T')[0],
        Sex: '男',
        WorkType: row.WORKTYPE,
        ClientNo: row.CLIENT_NO,
        VID: row.VID
      }
    },
    // 保存编辑人员
    async saveEditPerson () {
      for (const k in this.newPersonForm) {
        if (this.newPersonForm[k] === '') {
          this.$message({
            message: '表单项不能为空！！',
            type: 'warning'
          })
          return false
        }
      }
      const { Name, Phone, SimCardNo, BirhDay, WorkDate, Sex, WorkType, ClientNo, VID } = this.newPersonForm
      const params = { Name, SimCardNo, ClientNo, Phone, Sex, WorkType, BirhDay, WorkDate, VID }
      const { data } = await this.$Http.get('/DataListCompany/UpdateWorkerApi', { params })
      if (data.IsSucess) {
        this.$message({
          message: '保存成功！！！',
          type: 'success'
        })
        this.newPersonForm.show = false
        this.person.listShow = true
        this.getPersonList()
        this.resetForm('newPersonForm')
      } else {
        this.$message({
          message: '保存失败！！！',
          type: 'warning'
        })
      }
    },
    // 人员管理--删除人员
    rowClick (row, column, event) {
      this.personVID = row.VID
    },
    async deletePerson () {
      await this.$Http.get(`/DataListCompany/DeleteWorkerApi?VID=${this.personVID}`)
    },
    // 鼠标进入单元格显示其内容
    cellMouseEnter (row, column, cell, event) {
      cell.setAttribute('title', cell.innerText)
    },
    // 格式化表格数据--生日
    formatter (cellValue) {
      return cellValue.BIRTHDAY.replace('T', ' ')
    },
    // 格式化表格数据--入职时间
    formatterTime (cellValue) {
      return cellValue.WORKDATE.replace('T', ' ')
    }
  }

}
</script>

<style scoped lang="less">
.person_management {
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 10px;
  position: relative;
  cursor: default;
  & > span:hover {
    color: #eee;
  }
  .person_m {
    // width: 900px;
    width: 70%;
    height: 540px;
    padding: 0;
    padding-bottom: 10px;
    background-color: #fff;
    border: 1px solid #ccc;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 99;
    box-shadow: 0 0 5px 3px #ccc;
    border-radius: 8px;
    h2 {
      line-height: 30px;
      border-bottom: 1px solid #ccc;
      padding-left: 10px;
      color: #666;
      span {
        margin-right: 5px;
      }
      i {
        float: right;
        margin-right: 10px;
      }
    }
    .top_box {
      height: 30px;
      border-bottom: 1px solid #ccc;
      display: flex;
      align-items: center;
      padding-left: 20px;
      .el-form {
        height: 26px;
        .el-input {
          width: 100px;
        }
        .el-select {
          width: 150px;
        }
        /deep/.el-form-item {
          vertical-align: baseline;
          .el-button /deep/ span {
            margin-left: 0;
          }
        }
      }
    }
    .person_content {
      // height: 492px;
      height: calc(~"100% - 63px");
      overflow-y: auto;
      .new_person {
        width: 400px;
        height: 450px;
        border: 1px solid #ccc;
        border-radius: 8px;
        margin: 15px auto;
        box-shadow: 0 0 5px 2px #ccc;
        .icon-guanbi {
          float: right;
          margin-right: 10px;
        }
        .el-form {
          width: 260px;
          height: 180px;
          margin: 10px auto;
          background-color: #fff;
          .el-form-item {
            margin-bottom: 20px;
          }
          .btns {
            display: flex;
            align-items: center;
            justify-content: center;
            // padding-top: 10px;
            .el-button {
              margin: 0 10px;
              /deep/span {
                padding: 0 5px;
              }
            }
          }
        }
      }
    }
  }
}
</style>
